<template>
    <div class="topic">
        <h3>{{ title }}</h3>
        <van-swipe class="my-swipe" :autoplay="1000" indicator-color="white">
            <van-swipe-item
                v-for="item in topicList"
                :key="item.id"
            >
                <img :src="item.item_pic_url" alt="" />
                <p>{{ item.title }}</p>
                <p>{{ item.subtitle }}</p>
            </van-swipe-item>
        </van-swipe>
    </div>
</template>

<script>
export default {
    name: 'topic',
    props: ['topicList', 'title'],
    
}
</script>

<style lang="less" scoped>
.topic {
    width: 100%;
    text-align: center;
    font-size: 16px;
    h3 {
        font-size: 22px;
        line-height: 60px;
        text-align: center;
    }
    .my-swipe {
        display: flex;
        img {
            width: 100%;
            height: 200px;
        }
    }
}
</style>